<template>
  <div>
    <!-- 数据列表 -->
    <yd-table
      :formData="extendData"
      :tableConfig="tableConfig"
      :tableData="tableData"
      @sizeChangeHandler="handlerSearch"
      @currentChangeHandler="handlerSearch"
      @sortChangeHandler="handlerSearch"
    ></yd-table>
  </div>
</template>

<script setup name="UserList" lang="tsx">
import { affectUser } from "@/api/ops-workbench/business-alarm-analysis/index";
import { ref, reactive, onMounted, onActivated } from "vue";
import { useRouter } from "vue-router";
import useCurrentInstance from "@/utils/useCurrentInstance";

const { proxy } = useCurrentInstance();
const props = defineProps({
  params: {
    type: Object,
    default: {}
  }
});
const router = useRouter();

// 表单额外参数
const extendData = reactive({});
// 关联查询参数
const queryData = reactive({});
// 列表配置
const tableConfig = reactive({
  columns: [
    {
      label: "用户名",
      prop: "userIdentify",
      formatter: (row: anyObj, val: ApiVal) => {
        return val !== "" ? val : "-";
      },
    },
    {
      label: "系统名称",
      prop: "systemName",
    },
    {
      label: "业务名称",
      prop: "businessName",
    },
    {
      label: "开始时间",
      prop: "startTime",
      formatter: (row: anyObj, val: string) => {
        return val ? val.substr(0, 19) : val;
      },
      width: 160,
    },
    {
      label: "结束时间",
      prop: "endTime",
      formatter: (row: anyObj, val: string) => {
        return val ? val.substr(0, 19) : val;
      },
      width: 160,
    },
    {
      label: "响应状态",
      prop: "dealState",
      formatter: (row: anyObj, val: string) => {
        if (val === "1") {
          val = "成功";
        } else {
          val = "失败";
        }
        return val;
      },
    },
    {
      label: "业务返回码",
      prop: "customResCode",
        render: (row: anyObj, val: ApiVal) => {
        if (
          row.explain == undefined ||
          row.explain == null ||
          row.explain == ""
        ) {
          return <span>{val}</span>;
        } else {
          return (
            <span>
              {val}({row.explain})
            </span>
          );
        }
      },
    },
    // {
    //   label: "告警量",
    //   prop: "failCount",
    // },
    {
      label: "响应耗时",
      prop: "serverResponseTime",
      formatter: (row: anyObj, val: number) => {
        return val !== null ? (val / 1000).toFixed(2) + "ms" : val;
      },
    },
    {
      label: "传输耗时",
      prop: "networkTranslateTime",
      formatter: (row: anyObj, val: number) => {
        return val !== null ? (val / 1000).toFixed(2) + "ms" : val;
      },
    },
    {
      label: "办理时长",
      prop: "dealTime",
      formatter: (row: anyObj, val: number) => {
        return val !== null ? (val / 1000).toFixed(2) + "ms" : val;
      },
    },
    {
      label: "归属区域",
      prop: "areaName",
    },
    {
      label: "操作",
      prop: "",
      width: 100,
      operation: [
        {
          text: "详情",
          handler: (scope: anyObj) => jump(scope.row),
        },
      ],
    },
  ],
  pagination: {
    pageSize: 10,
    pageNum: 1,
    total: 0,
  },
  loading: true,
  disableOrderNumber: true,
});
// 列表数据
const tableData = ref([]);

//重新加载
function reloadList(e: anyObj) {
  handlerSearch();
}
// 搜索
function handlerSearch() {
  const formData = {
    ...extendData,
    ...queryData,
  };
  tableConfig.loading = true;
  affectUser(formData).then((res: ApiResponse) => {
    tableConfig.loading = false;
    if (res.code === 0) {
      tableData.value = res.data.data;
      tableConfig.pagination.total = res.data.total;
    } else {
      proxy.$modal.msgError(res.msg);
    }
  });
}
function jump(obj: anyObj) {
  let ro;
  ro = router.resolve({
    path: "/ops-workbench/historicalAlarmQuery/businessDetail/business_detail",
    query: {
      businessDetailId: obj.detailId,
      startTime: obj.startTime,
      startTimeUsec: obj.startTimeUsec,
      endTime: obj.endTime,
      endTimeUsec: obj.endTimeUsec,
    },
  });
  window.open(ro.href, "_blank");
}
function initQuery(){
  for(let key in proxy.$route.query){
    queryData[key] = proxy.$route.query[key]
  }
}

onMounted(()=>{
  initQuery()
  handlerSearch();
  console.log('active-2')
})
onActivated(()=>{
  initQuery()
  handlerSearch();
  console.log('active-1')
})


defineExpose({
  reloadList
});
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
